<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{stream.streamName}} - Chat</title>
    <script type="text/javascript" src="/static/vendor/socketio/js/socket.io.js"></script>
    <script type="text/javascript" src="/static/vendor/popper/js/popper.min.js"></script>
    <link rel=stylesheet type=text/css href="/static/css/Defaultv2/{{sysSettings.systemTheme}}.css">
    <link rel=stylesheet type=text/css href="/static/css/shared.css">
    <link rel=stylesheet type=text/css href="/static/css/slider.css">
    <link rel="stylesheet" href="/static/vendor/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/vendor/fontawesome/css/all.css">

</head>
<body>
<div class="col-12">
  <div class="chatbox-popout">
      <div class="h-100 d-flex flex-column">
          <div id="chat" class="{% if hideBar != True %}chatpopout{% elif hideBar == True %}chatpopout-nobar{% endif %} flex-grow-1"></div> <br>
          {% if hideBar == False %}
          <div class="chat-popout-bottom">
              <input autocomplete="off" id="text" size="80" class="form-control shadow" {% if current_user.is_authenticated==false %} disabled placeholder="Login to Chat" {% else %} placeholder="Type Message Here..." {% endif %}><br>
              <button type="button" id="userList" class="btn btn-primary shadow" data-html="true" data-toggle="popover" title="<b>User List</b>" data-content="" data-placement="right"><i class="fas fa-list"></i></button>
              <span class="float-right"><button id="chatSubmit" class="btn btn-success shadow" onclick="sendChat();">Send</button></span>
          </div>
          {% endif %}
      </div>
  </div>
</div>

<script src="/static/vendor/jquery/js/jquery-3.3.1.min.js"></script>
<script src="/static/vendor/popper/js/popper.min.js"></script>
<script src="/static/vendor/bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript" charset="utf-8">
        var conn_options = {
            'sync disconnect on unload':true
        };

        var socket = io();
    </script>

    <script>
        socket.on('connect', function() {
            socket.emit('openPopup', {data: '{{channel.channelLoc}}'});
        });
    </script>

    <script>
        socket.on('disconnect', function() {
            socket.emit('closePopup', {data: '{{channel.channelLoc}}'});
        });
    </script>


    <script>
        window.addEventListener("beforeunload", function (e) {
            socket.emit('closePopup', {data: '{{channel.channelLoc}}'});
            return null;
        });
    </script>

    {% if hideBar == False %}
    <script type="text/javascript" charset="utf-8">
        socket.on('viewerTotalResponse', function (msg) {
            document.getElementById("currentViewers").innerHTML = msg['data'];
            var userBoxHTML = "";
            var userList = msg['userList'];
            var userListLength = userList.length;
            for (var i = 0; i < userListLength; i++) {
                userBoxHTML = userBoxHTML.concat(userList[i],'<br>');
            }
            var userListElement = document.getElementById("userList");
            userListElement.setAttribute("data-content",userBoxHTML);
        });
    </script>

    <script>
        var chatTimer;
        var chatThrottled = false;
        var chatTimeout = 2000;

        function chatThrottleDisable() {
            chatThrottled = false;
        }

        function sendChat() {
            if (chatThrottled == false) {
                text = $('#text').val();
                $('#text').val('');
                socket.emit('text', {msg: text, room: '{{channel.channelLoc}}'});
                chatThrottled = true;
                chatTimer = setTimeout(chatThrottleDisable, chatTimeout);
            }

        };

        $('#text').keypress(function(e) {
            var code = e.keyCode || e.which;
            if (code == 13) {
                sendChat();
            }
        });
    </script>
    {% endif %}

    <script>
        socket.on('message', function(data) {
            var today = new Date();
            var h = today.getHours();
            var m = (today.getMinutes() < 10? '0' : '') + today.getMinutes();
            var s = today.getSeconds();
            var message = decodeURIComponent((escape(decodeURIComponent(data['msg']))));
            if (data['flags'] === 'Owner') {
                $('#chat').append('<div class="chatBar-Item chat-{{channel.chatBG}} {{channel.chatAnimation}}"><div class="charBar-Item-Image"><img class="rounded" src="' + data['image'] + '" width="52px" height="52px" onerror="this.src=\'/static/img/user2.png\';"></div><div class="chatBar-Item-Text" style="color:{{channel.chatTextColor}};"><b>' + data['user'] + '</b> <i class="fas fa-crown"></i> ' + h + ':' + m + '<br>' + message + '</div></div>');
            } else if (data['flags'] === 'Bot')
            {
                $('#chat').append('<div class="chatBar-Item chat-{{channel.chatBG}} {{channel.chatAnimation}}"><div class="charBar-Item-Image"><img class="rounded" src="' + data['image'] + '" width="52px" height="52px" onerror="this.src=\'/static/img/user2.png\';"></div><div class="chatBar-Item-Text" style="color:{{channel.chatTextColor}};"><b>' + data['user'] + '</b> <i class="fas fa-robot"></i> ' + h + ':' + m + '<br>' + message + '</div></div>');
            } else {
                $('#chat').append('<div class="chatBar-Item chat-{{channel.chatBG}} {{channel.chatAnimation}}"><div class="charBar-Item-Image"><img class="rounded" src="' + data['image'] + '" width="52px" height="52px" onerror="this.src=\'/static/img/user2.png\';"></div><div class="chatBar-Item-Text" style="color:{{channel.chatTextColor}};"><b>' + data['user'] + '</b> ' + h + ':' + m + '<br>' + message + '</div></div>');
            }
            $('#chat').animate({ scrollTop: 1000000 }, "fast");
        });
    </script>

    <script>
        $(function () {
            $('[data-toggle="popover"]').popover()
        })
    </script>

</body>
</html>